<template>
  <div>
    <h2>补丁更新记录</h2>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
      <v-tooltip />
      <v-axis />
      <v-smooth-line position="month*temperature" color="city" shape="smooth" />
      <v-point position="month*temperature" color="city" shape="circle" />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require('@antv/data-set')

const sourceData = [
  { month: '2021.5.6', Tokyo: 7.0, London: 3.9 },
  { month: '2021.5.7', Tokyo: 6.9, London: 4.2 },
  { month: '2021.5.8', Tokyo: 9.5, London: 5.7 },
  { month: '2021.5.9', Tokyo: 14.5, London: 8.5 },
  { month: '2021.5.10', Tokyo: 18.4, London: 11.9 },
  { month: '2021.5.11', Tokyo: 21.5, London: 15.2 },
  { month: '2021.5.12', Tokyo: 25.2, London: 17.0 },
]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'fold',
  fields: ['Tokyo', 'London'],
  key: 'city',
  value: 'temperature',
})
const data = dv.rows

const scale = [
  {
  },
]

export default {
  data() {
    return {
      data,
      scale,
      height: 300,
    }
  },
}
</script>
